<template>
  <div>
    <header-tilte :title="title"></header-tilte>
    <loading v-if="isShowLoading"></loading>
    <div class="flex_center" v-if="!isShowLoading">
      <div class="bodyContent">
        <p class="applyText"><i class="fa fa-bell-o" style="margin-right: 0.5rem"></i>
          最低提现金额 <span style="font-weight: bold">{{withdraw_min}}</span> 元
        </p>
        <div style="padding: 1rem;margin-top: 0.5rem" class="content">
          <mu-form ref="form" :model="apply" class="mu-demo-form" :label-position="labelPosition" label-width="100">
            <mu-form-item prop="shop_name" label="店铺" style="text-align: left" :rules="shop_nameRules" v-if="sureChooseShop == 1">
              <mu-text-field v-model="apply.shop_name" prop="shop_name" placeholder="请选择所属店铺" @click="openChooseShop()">

              </mu-text-field>
              <div class="chooseShop flex flex_column" v-if="isOpen" @click="isOpen = false">
                <div v-for="(shop,index) in shopList" >
                  <p v-bind:class="[index == isActive ? 'app-is-focused' : '']" @click="chooseShop(shop,index)" class="flex flex_between"><span>{{shop.shop_name}}</span><span style="margin-left: 1rem">￥{{shop.able_money}}</span></p>
                </div>
              </div>
            </mu-form-item>

            <mu-form-item prop="money" label="金额" style="text-align: left" :rules="moneyRules">
              <mu-text-field v-model="apply.money" prop="money" placeholder="请输入待提取金额"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="radio" label="付款方式" style="text-align: left">
              <mu-radio v-model="apply.radio" value="1" label="微信"></mu-radio>
              <mu-radio v-model="apply.radio" value="2" label="支付宝"></mu-radio>
            </mu-form-item>
            <mu-form-item prop="account" label="账号" style="text-align: left" :rules="accountRules">
              <mu-text-field v-model="apply.account" prop="account" placeholder="请输入提现账号"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="account_name" label="收款人姓名" style="text-align: left" :rules="accountNameRules" v-if="apply.radio == 2">
              <mu-text-field v-model="apply.account_name" prop="account_name" placeholder="请输入收款人姓名"></mu-text-field>
            </mu-form-item> <!--<mu-form-item class="address_button positon_fix">-->
            <mu-button class="app_button " color="primary" @click="submit">提交</mu-button>

          </mu-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";
    import Rules from '../../components/Rules'

    export default {
      data(){
        return{
          isShowLoading:true,
          title:'提现',
          withdraw_min:1,
          labelPosition: 'left',
          apply:{
            money:'',
            radio:'1',
            account:'',
            account_type:'',
            account_name:'',
            shop_name:'',
          },
          shop_nameRules:[
            {validate: (val) => Rules.required(val), message: '请选择待提现店铺'}
          ],
          moneyRules: [
            { validate: (val) => Rules.required(val), message: '请输入待提取金额'},
            { validate: (val) => Rules.min(val,this.withdraw_min,),message:'提现金额必须大于最小提现金额' },
            { validate: (val) => Rules.appChoosed(val,this.able_money,this.sureChooseShop), message: '提现金额必须小于所选店铺的金额'}
          ],
          accountRules: [
            { validate: (val) => Rules.required(val), message: '请输入提现账号'},
          ],
          accountNameRules:[
            { validate: (val) => Rules.checkChoose(val,this.apply.radio,2), message: '请输入收款人姓名'},
          ],
          mid:'',
          aid:'',
          shopList:'',
          isActive:-1,
          isOpen:false,
          able_money:'',
          sureChooseShop:0,//0表示不需要选择店铺 1表示需要选择店铺
          choosed_shop_id:'',


        }
      },
      mounted(){
        this.checkLogin();
        var login = this.getCache('login_key');
        this.mid = login.mid;
        this.aid = login.aid;
        var min_money = login.withdraw_min;
        min_money = '0.00';
        if(this.isEmpty(min_money) || parseInt(min_money)===0){
          this.withdraw_min = '1.00';
        }else {
          this.withdraw_min = min_money;
        }
        this.mid = login.mid;
        this.shop_id = login.shop_id;
        this.$nextTick(function () {
          $('.address_button .mu-form-item-label').css('width','0')
        })
        var url = window.location.hostname;
        if(!this.isEmpty(url) && url != 'shop.qudingshui.com'){
          this.sureChooseShop = 1;
          this.initShopList();
        }

      },
      methods:{
        initShopList(){
          this.yesS.commissionShopList(
            this.$combineParams({aid:this.aid,mid:this.mid})
          ).then(res => {
            console.log(res)
            this.shopList = res.data.list;
            this.isShowLoading = false;
            if(this.isEmpty(this.shopList) || this.shopList.length <= 0){
              this.$alert('您暂无可供提现的店铺', '提示');
            }
          })
        },

        openChooseShop(){
          if(this.isEmpty(this.shopList) || this.shopList.length <= 0){
            this.$toast.warning('暂无店铺可供提现');
            return
          }
          this.isOpen = !this.isOpen;
        },
        chooseShop(obj,index){
          this.isActive = index;
          this.apply.shop_name = obj.shop_name;
          this.able_money = obj.able_money;
          this.choosed_shop_id = obj.shop_id;
          this.isOpen = false
        },
        submit(){

          this.$refs.form.validate().then((result) => {
            if(result == true){
              this.yesS.ApplySubmit(
                this.$combineParams({
                  mid:this.mid,
                  shop_id:this.shop_id,
                  money:this.apply.money,
                  account_type:this.apply.radio,
                  account_name:this.apply.account_name,
                  account:this.apply.account,
                  sid:this.choosed_shop_id,
                  able_money:this.able_money
                })
              ).then(res => {
                this.$router.push({path:'/qds/myExtend'})
              })
            }}
          )
        },


      },
      components: {
        Loading,
        HeaderTilte},
      name: "apply-withdraw"
    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .applyText{
    background: #fff3dc;
    padding: 0.2rem 1rem;
    color: #f23030;
    text-align: left;
  }
  .address_button{
    position: fixed;
    bottom: -33px;
    left: -23px;
    right: 9px;
  }

  .address_button button{
    width: 100%;
  }
  .address_button .mu-raised-button{
    height: 44px;
    line-height: 44px;
  }

  .content .mu-form-item-label{
    width: 86px!important;
  }
  .app_button{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .chooseShop{
    background: #f1f1f1;
    padding: 1rem;
    box-shadow: 4px 4px 15px #d8d6d6;
  }
  .chooseShop p{
    padding: 0.5rem;
  }

  .app-is-focused {
    background-color: rgba(0,0,0,.1);
  }


</style>
